<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('充氧宝编号')}}：</p>
        <el-input v-model="power_id" :placeholder="$t('请输入充氧宝编号')"></el-input>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
        {{$t('提交')}}
      </button>
      <button class="sub_btn font14 text_white bg_blue" style="margin-left: 10px;" @click="downloadsss()">
        {{$t('导出')}}
      </button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column
          prop="device_id"
          :label="$t('充氧宝编号')"
        ></el-table-column>
        <el-table-column
          prop="num"
          :label="$t('租赁次数')"
        ></el-table-column>
        <el-table-column
          prop="time"
          :label="$t('注册时间')"
        ></el-table-column>
        <el-table-column :label="$t('操作')" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openBatteryLog(scope.row)" v-if="permissions.indexOf('/equipment/batteryLog') != -1">{{$t('日志')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box ">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 充氧宝日志 -->
      <el-dialog
        width="1000px"
        :title="$t('充氧宝日志')"
        :visible.sync="batteryLog"
        :close-on-click-modal="false"
      >
        <div class="battery_log">
          <el-table :data="logTable">
            <el-table-column
              prop="device_id"
              :label="$t('机柜编号')"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="time"
              :label="$t('时间')"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="user_type"
              :label="$t('操作者')"
              width="120"
            ></el-table-column>
            <el-table-column prop="memo" :label="$t('备注')"></el-table-column>
          </el-table>
          <div class="pagination_box ">
            <el-pagination
              background
              
              @current-change="handleLogChange"
              :current-page="log_page"
              :page-size="log_page_size"
              layout="total, prev, pager, next, jumper"
              :total="log_total"
            >
            </el-pagination>
          </div>
        </div>
      </el-dialog>
      <!-- 充氧宝日志 end -->
      <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from '@/assets/js/util.js'
import { mapState } from 'vuex'
export default {
  name: 'equipment-batteryList',
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      log_page: 1,
      log_page_size: 20,
      log_total: 0,
      power_id: "",
      tableData: [],
      batteryLog: false,
      logTable: [],
      device_id_log:''
    };
  },
  computed: {
    ...mapState(['permissions'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.power_id = ''
      this.getData()
    },
    downloadsss() {
      util.$http('/equipment/batteryList?page=' + this.page, {
        page_size: this.page_size,
        device_id: this.power_id,
        is_excel: 1
      })
        .then(res => {
          if (res.code == 301) {
            window.location.href = res.msg
          }
        })
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/equipment/batteryList?page=' + this.page, {
        page_size: this.page_size,
        device_id: this.power_id,
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    },
    openBatteryLog(row) {
      this.batteryLog = true;
      this.device_id_log = row.device_id
      setTimeout(() => {
        this.getLogData()
      }, 150);
    },
    getLogData() {
      util.$http('/equipment/batteryLog?page=' + this.log_page, {
        page_size: this.log_page_size,
        battery_id: this.device_id_log
      })
      .then(res=>{
        if(res.code == 1) {
          this.log_total = res.data.total
          this.logTable = res.data.list
        }
      })
    },
    handleLogChange(val) {
      this.log_page = Number(val)
      this.getLogData()
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 290px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
